<template>
    <Dialog v-show="show" load-animation modal :limit-confirm="!countryName.length" :confirm-action="close">
        <template #header>
            <h1>诸侯争霸</h1>
        </template>
        <template #content>
            <section>
                <div class="show-part">
                    <div>诸侯国号：</div>
                    <div class="country-name">{{ countryName }}</div>
                </div>
                <CountryName @change-name="changeCountryName"></CountryName>
                <div>
                    <div>诸侯卡一览：</div>
                    <LordCardControl></LordCardControl>
                </div>
            </section>
        </template>
    </Dialog>
    <div class="room">
        <RoomSeat></RoomSeat>
        <RoomSeat></RoomSeat>
        <RoomSeat></RoomSeat>
        <RoomSeat></RoomSeat>
        <RoomSeat></RoomSeat>
        <RoomSeat></RoomSeat>
        <RoomSeat></RoomSeat>
        <RoomSeat></RoomSeat>
    </div>
</template>

<script lang="ts" setup>
import CountryName from '@/components/controls/country-name.vue';
import LordCardControl from '@/components/controls/lord-card.vue';
import RoomSeat from '@/components/game/room-seat.vue';
import Dialog from '@/components/ui/dialog.vue';
import { ref } from 'vue';
const show = ref(true);
const countryName = ref('');
const changeCountryName = (name: string) => {
    countryName.value = name;
}
const close = () => {
    show.value = false
}
</script>

<style scoped>
section {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 2vh;
}

/* room */
.room {
    display: grid;
    justify-content: center;
    justify-items: center;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 1vh;
    width: 100%;
}

/* dialog */
h1 {
    font-size: min(40px, 4vw)
}

section {
    padding: 1vh 1vw;
    margin: 1vh 0;
}

section * {
    font-size: min(32px, 3vw)
}

.show-part {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1vh;
}

.country-name {
    font-weight: 800;
    position: relative;
    text-shadow: 1px 1px 0px #b87333, -1px -1px 0px #b87333, 0 0 3px red;
    color: #000;
}
</style>